<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="tablePaneClick">
        <el-tab-pane :label="`我的博客(${total})`" name="first">

          <el-table :data="myBlog" :show-header="false" style="width: 100%">
            <!--博客标题-->
            <el-table-column>
              <template slot-scope="scope">
                <span class="message-title" @click="jumpToBlog(scope.row.uid)">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <!-- 博客日期-->
            <el-table-column width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>

            <el-table-column width="120">
              <template slot-scope="scope">
                <el-button size="small" @click="jumpToEdit(scope.row.uid)">编辑博客</el-button>
              </template>

            </el-table-column>

            <el-table-column width="120">

              <template slot-scope="scope">
                <el-button size="small" @click="deleteBlog(scope.row.uid)">删除博客</el-button>
              </template>
            </el-table-column>

          </el-table>
          <div class="handle-row">
            <el-button type="danger" @click="createBlog">新建博客</el-button>
          </div>
          <div class="block" style="text-align: center;">
            <el-pagination
                :current-page="currentPage"
                :page-size="pagesize"
                :total="total"
                layout="total, prev, pager, next, jumper"
                @current-change="pageChange">
            </el-pagination>
          </div>

        </el-tab-pane>

        <el-tab-pane :label="`热门博客`" name="second">

          <el-table :data="hotBlog" :show-header="false" style="width: 100%">
            <!--博客标题-->
            <el-table-column>
              <template slot-scope="scope">
                <span class="message-title" @click="jumpToBlog(scope.row.uid)">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <!-- 博客日期-->
            <el-table-column width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column width="120">

            </el-table-column>

          </el-table>

          <div class="block" style="text-align: center;">
            <el-pagination
                :current-page="hotCurrentPage"
                :page-size="pagesize"
                :total="hotTotal"
                layout="total, prev, pager, next, jumper"
                @current-change="pageChange">
            </el-pagination>
          </div>

        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
import {deleteBlogApi, getHotBlogApi, getBlogByUserApi, getBlogCountByUserApi} from "../../api/blogApi";

export default {
  name: 'tabs',
  data() {
    return {
      useruid: null,
      currentPage: 1,
      pagesize: 10,
      blogCount: null,
      total: 100,
      activeName: 'first',
      showHeader: false,
      myBlog: [],

      hotTotal: 17,
      hotCurrentPage: 1,
      hotBlog: [],
      recycle: [],
      params: {
        blogUid: this.blogUid,
        title: this.title,
        summary: null,
        content: this.handbook,
        tag_uid: null,
        click_count: null,
        collect_count: null,
        file_uid: null,
        status: 1,
        is_original: "1",
        author: null,
        articles_part: null,
        blog_sort_uid: null,
        is_publist: "1",
        sort: 1,
        outside_link: null,
        userUid: this.userUid,
        article_source: 1
      }

    }
  },

  created() {

  },
  mounted() {
    this.useruid = this.$el.attributes.useruid.value
    this.getUserBlogCount()
    this.getUserBlog()

  },
  methods: {
    jumpToBlog(blogUid) {
      let url = this.$router.resolve("/blog/" + blogUid)
      window.open(url.href, '_blank');
    }
    ,
    jumpToEdit(blogUid) {
      let url = this.$router.resolve("/edit/" + blogUid)
      window.open(url.href, '_blank');
    }
    ,
    getUserBlog() {

      getBlogByUserApi(this.currentPage).then(
          response => {
            if (response.code === "success") {
              this.myBlog = response.data
            }
            console.log("success getUserBlog");
          },
          function (err) {
            console.log(err);
          }
      );
    },
    getUserBlogCount() {

      getBlogCountByUserApi().then(
          response => {
            if (response.code === "success") {
              this.total = response.data
            }
          },
          function (err) {
            console.log(err);
          }
      );
    },
    createBlog() {
      //打开空白edit
      this.jumpToEdit(null)
    },
    deleteBlog(uid) {

      deleteBlogApi(uid).then(
          response => {
            if (response.code === "success") {
              // this.$router.go(0);
              this.getUserBlog()
              this.getUserBlogCount()
            }
          },
          function (err) {
            console.log(err);
          }
      );
    },

    pageChange(value) {
      this.currentPage = value
      this.getUserBlog()
    },
    getHotBlog() {
      getHotBlogApi().then(
          response => {
            if (response.code === "success") {
              this.hotBlog = response.data
            }
          },
          function (err) {
            console.log(err);
          }
      );
    },
    tablePaneClick(tab, event) {
      if (this.activeName === "second") {
        this.getHotBlog()
      }
    },

  }

}

</script>

<style>
.message-title {
  cursor: pointer;
}

.handle-row {
  margin-top: 30px;
}
</style>

